<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加凭证</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/jquery-ui/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/add_voucher.css">
    <script type="text/javascript" src="__STATIC__/plugins/jquery-ui/external/jquery/jquery.js"></script>
    <script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="__STATIC__/plugins/jquery-ui/jquery-ui.js"></script>
</head>

<body>
<div class="layui-header">
    <span style="font-size: 18px; font-weight: bold;">记账凭证</span>
</div>
<form class="layui-form" id="voucher">
    <div class="layui-main" style="width: 1000px;">
        <div class="head">
            <div class="layui-form-item layui-inline">
                <select name="type">
                    <option value="记">记</option>
                    <option value="收">收</option>
                    <option value="付">付</option>
                    <option value="转">转</option>
                </select>
            </div>
            <div class="layui-form-item layui-inline" style="width: 50px">
                <input class="layui-input" type="text" name="num_voucher">
            </div>
            <div class="layui-form-item layui-inline title">
                <span>号</span>
            </div>
            <div class="layui-form-item layui-inline title">
                <span>日期：</span>
            </div>
            <div class="layui-form-item layui-inline" style="width: 115px;">
                <input class="layui-input" id="account" type="text" name="add_time">
            </div>
            <button class="layui-btn primary layui-btn-sm" type="button"
                    style="margin-left: 20px; height: 25px; line-height: 25px; margin-top: 4px;" onclick="refresh()">刷新
            </button>
            <div class="header_right">
                <div class="layui-form-item layui-inline title">
                    <span>附单据</span>
                </div>
                <div class="layui-form-item layui-inline">
                    <input class="layui-input" type="text">
                </div>
                <div class="layui-form-item layui-inline title ">
                    <span>张</span>
                </div>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="button">附件</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="button">备注</button>
            </div>
        </div>
        <div class="table_voucher">
            <table class="layui-table" style="width: 960px;">
                <thead>
                <tr>
                    <th style="width: 135px; font-weight: bold;">摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</th>
                    <th style="width: 290px; font-weight: bold;">会计科目</th>
                    <th style="width: 219px">
                        <div class="th_title">
                            <span>借方金额</span>
                        </div>
                        <div class="th_money">
                            <span>亿</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>万</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>元</span>
                            <span>角</span>
                            <span class="last">分</span>
                        </div>
                    </th>
                    <th style="width: 219px">
                        <div class="th_title">
                            <span>贷方金额</span>
                        </div>
                        <div class="th_money">
                            <span>亿</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>万</span>
                            <span>千</span>
                            <span>百</span>
                            <span>十</span>
                            <span>元</span>
                            <span>角</span>
                            <span class="last">分</span>
                        </div>
                    </th>
                    <th style="width: 101px">操作</th>
                </tr>
                </thead>
                <tbody id="tbody">
                <tr>
                    <td class="digestInput">
                        <div></div>
                    </td>
                    <td class="subjectInput">
                        <div></div>
                    </td>
                    <td class="td_debtor">
                    </td>
                    <td class="td_creditor">
                    </td>
                    <td>
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-xs" onclick="row_add(this)">增加</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="row_del(this)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="digestInput">
                        <div></div>
                    </td>
                    <td class="subjectInput">
                        <div></div>
                    </td>
                    <td class="td_debtor">
                    </td>
                    <td class="td_creditor">
                    </td>
                    <td>
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-xs" onclick="row_add(this)">增加</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="row_del(this)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="digestInput">
                        <div></div>
                    </td>
                    <td class="subjectInput">
                        <div></div>
                    </td>
                    <td class="td_debtor">
                    </td>
                    <td class="td_creditor">
                    </td>
                    <td>
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-xs" onclick="row_add(this)">增加</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="row_del(this)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="digestInput">
                        <div></div>
                    </td>
                    <td class="subjectInput">
                        <div></div>
                    </td>
                    <td class="td_debtor">
                    </td>
                    <td class="td_creditor">
                    </td>
                    <td>
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-xs" onclick="row_add(this)">增加</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="row_del(this)">删除</a>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td id="count" colspan="2">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：
                        <span></span>
                        <input type="hidden" name="footing_upper"/>
                    </td>
                    <td id="tfoot_debtor">
                        <div>
                            <span></span>
                            <input type="hidden" name="footing_lower"/>
                        </div>
                    </td>
                    <td id="tfoot_creditor">
                        <div>
                            <span></span>
                            <input type="hidden" name="footing_creditor"/>
                        </div>
                    </td>
                    <td>
                        <a class="layui-btn layui-btn-bg"
                           style="width: 99px; height: 59px; border-radius: 0; line-height: 62px"
                           onclick="saveVoucher()">保存</a>
                    </td>
                </tr>
                </tfoot>
            </table>
            <footer>
                <span>制单人：</span>
                <span id="span_prepard">达克赛德</span>
                <input type="hidden" id="input_prepard" name="prepard_by" value=""/>
                <a href=""><span id="prepard_by"></span></a>
            </footer>
            <div id="showContent"></div>
        </div>
    </div>
</form>
<script type="text/javascript" src="__STATIC__/js/digital.js"></script>
<script>
    layui.use(['form', 'table', 'layer', 'laydate'], function () {
        var element = layui.element,
            laydate = layui.laydate,
            table = layui.table;
        layer = layui.layer;

        laydate.render({
            elem: '#account',
            showBottom: false,
            value: new Date(),
        });

    });
</script>
<script type="text/javascript">
    //增加行
    function row_add(obj) {
        var subjects = getSubjects();
        var row = '<tr><td class="digestInput"><div></div></td>' +
            '<td class="subjectInput"><div></div></td><td class="td_debtor">' +
            '</td><td class="td_creditor"></td><td><div class="layui-btn-group">' +
            '<a class="layui-btn layui-btn-xs" onclick="row_add(this)">增加</a>' +
            '<a class="layui-btn layui-btn-danger layui-btn-xs" onclick="row_del(this)">' +
            '删除</a></div></td></tr>';
        $(obj).parent().parent().parent().after(row);
        $('.digestInput').click(function () {
            digestInput(this);
        });
        $('.subjectInput').click(function () {
            subjectInput(this, subjects);
        });
        $('.td_debtor').click(function () {
            debtorInput(this);
        });
        $('.td_creditor').click(function () {
            creditorInput(this);
        });
        //显示单元格隐藏内容
        showContent();
        //自动计算单元格的值
        autoCount();
    }

    //删除行
    function row_del(obj) {
        layer.confirm('确定删除？', {
            icon: 7,
            btn: ['确定', '取消'] //按钮
        }, function () {
            $(obj).parent().parent().parent().remove();
            layer.msg('删除成功', {time: 1000, icon: 1});
        });
    }

    //刷新页面
    function refresh() {
        window.location.reload();
    }

    //会计科目
    function accountSubject() {
        var subjects_json = JSON.parse(sessionStorage.getItem('subjects'));
        var subjects = [];
        $.each(subjects_json, function (index, value) {
            subjects.push(index + ' ' + value);
        });
        subjects.sort();
        $(".subject").autocomplete({
            autoFocus: false,
            minLength: 0,
            // source: function(request, response) {
            //     $.post('/finance/public/index/voucher/subject', function(res) {
            //         response(res);
            //     }, 'json');
            // }
            source: subjects,
        }).bind('focus', function () {
            $(this).autocomplete("search");
        });
    }

    //摘要输入框
    function digestInput(obj) {
        $(obj).text('');
        var index = $(obj).parent().index();
        // console.log(index);
        var div =
            '<div><input class="layui-input" style="height: 61px; border: 0;" /></div><input type="hidden" name="digest_' +
            index + '" />';
        $(obj).append(div);
        $(obj).find('input').focus();
        $(obj).find('input').blur(function () {
            var value = $(this).val();
            if (value == "") {
                $(this).remove();
            }
            $(this).parent().next().val(value);
            $(this).parent().text(value);
        });
    }

    //获取科目
    function getSubjects() {
        if (sessionStorage.getItem('subjects') == null) {
            $.post('/finance/public/index/voucher/subject', function (res) {
                sessionStorage.setItem('subjects', JSON.stringify(res));
            });
        }
    }

    //会计科目增加输入框
    function subjectInput(obj) {
        $(obj).text('');
        var index = $(obj).parent().index();
        var div =
            '<div><input class="subject layui-input" style="height: 61px; border: 0;" /></div><input type="hidden" name="subject_' +
            index + '" />';
        $(obj).append(div);
        accountSubject();
        $(obj).find('input').focus();
        $(obj).find('input').blur(function () {
            var value = $(this).val();
            if (value == "") {
                $(this).remove();
            }
            $(this).parent().next().val(value);
            $(this).parent().text(value);
        });
    }

    //借方金额输入框
    function debtorInput(obj) {
        $(obj).text('');
        var index = $(obj).parent().index();
        var div =
            '<div><span><input class="layui-input" type="text" style="height:61px;border:0;position:relative;left:-5px" onkeyup="clearNoNum(this)" onkeydown="clearNoNum2(this,event)"></span><input type="hidden" name="debtor_' +
            index + '" /></div>';
        $(obj).append(div);
        $(obj).find('input').focus();
        $(obj).find('input').blur(function () {
            var value = Math.round(this.value * 100);
            if (value !== 0) {
                $(this).closest('td').next().text('');
            }
            $(this).parent().next().val(value);
            $(this).parent().text(value == 0 ? '' : value);
            total();
            sumCount();
        });
    }

    //贷方金额输入框
    function creditorInput(obj) {
        $(obj).text('');
        var index = $(obj).parent().index();
        var div =
            '<div><span><input class="layui-input" type="text" style="height:61px;border:0;position:relative;left:-5px;" onkeyup="clearNoNum(this)" onkeydown="clearNoNum2(this,event)"></span><input type="hidden" name="creditor_' +
            index + '" /></div>';
        $(obj).append(div);
        $(obj).find('input').focus();
        $(obj).find('input').blur(function () {
            var value = Math.round(this.value * 100);
            if (value !== 0) {
                $(this).closest('td').prev().text('');
            }
            $(this).parent().next().val(value);
            $(this).parent().text(value == 0 ? '' : value);
            total();
            sumCount();
        });
    }

    //控制只能输入11位数字且最多两位小数
    function clearNoNum(obj) {
        $(obj).attr('maxlength', 12);
        //修复第一个字符是小数点 的情况.
        if (obj.value != '' && obj.value.substr(0, 1) == '.') {
            obj.value = "";
        }

        // //整数最多只能输入9位
        // var reg = /^\d{9,}$/;
        // if (reg.test(obj.value)) {
        //     obj.value = obj.value.substr(0, 9);
        // }
        obj.value = obj.value.replace(/^0*(0\.|[1-9])/, '$1'); //解决 粘贴不生效
        obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        // obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
        //只能输入两个小数
        if (obj.value.indexOf('.') >= 0) {
            var value = $(obj).val().split('.');
            if (value[1].length == 2) {
                $(obj).attr('maxlength', value[0].length + 3);
            }
        }
        if (obj.value.indexOf(".") < 0 && obj.value != "") {
            //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            if (obj.value.substr(0, 1) == '0' && obj.value.length == 2) {
                obj.value = obj.value.substr(1, obj.value.length);
            }
        }

    }

    //整数最多只能输入9位
    function clearNoNum2(obj, e) {
        if (obj.value.length == 9 && e.keyCode != 110 && e.keyCode != 190) {
            $(obj).attr('maxlength', 9);
        }
    }

    //自动计算
    function autoCount() {
        $('#tbody td').click(function () {
            var className = $(this).attr('class');

            if (className == 'td_debtor') {
                $(this).keydown(function (e) {
                    if (e.keyCode == 187) {
                        //重置单元格数值
                        $(this).find('span').text(0);
                        $(this).parent().find('.td_creditor').text('');
                        //.td_debore所有值的和
                        var sum_debore = 0;
                        var debore = $('.td_debtor');
                        for (var i = 0; i < debore.length; i++) {
                            if ($(debore[i]).find('span').css('color') == 'rgb(255, 0, 0)') {
                                sum_debore -= Number($(debore[i]).find('span').text());
                            } else {
                                sum_debore += Number($(debore[i]).text());
                            }
                        }
                        //.td_creditor所有值的和
                        var sum_creditor = 0;
                        var creditor = $('.td_creditor');
                        for (var j = 0; j < creditor.length; j++) {
                            if ($(creditor[j]).find('span').css('color') == 'rgb(255, 0, 0)') {
                                sum_creditor -= Number($(creditor[j]).find('span').text());
                            } else {
                                sum_creditor += Number($(creditor[j]).text());
                            }
                        }

                        //赋值
                        var sum_cd = sum_creditor - sum_debore;
                        if (sum_cd < 0) {
                            var val = Math.abs(sum_cd);
                            $(this).find('span').css('color', 'red');
                            $(this).find('input').val(sum_cd);
                            $(this).find('span').text(val);
                            $(this).next().find('span').text('');
                            total();
                            sumCount();
                            return;
                        }
                        $(this).find('input').val(sum_cd);
                        $(this).find('span').text(sum_cd == 0 ? '' : sum_cd);
                        $(this).next().find('span').text('');
                        total();
                        sumCount();
                    }
                });

            }
            if (className == 'td_creditor') {
                $(this).keydown(function (e) {
                    if (e.keyCode == 187) {
                        //重置单元格数值
                        $(this).find('span').text(0);
                        $(this).parent().find('.td_debtor').text('');
                        //.td_debore所有值的和
                        var sum_debore = 0;
                        var debore = $('.td_debtor');
                        for (var i = 0; i < debore.length; i++) {
                            if ($(debore[i]).find('span').css('color') == 'rgb(255, 0, 0)') {
                                sum_debore -= Number($(debore[i]).find('span').text());
                            } else {
                                sum_debore += Number($(debore[i]).text());
                            }
                        }

                        //.td_creditor所有值的和
                        var sum_creditor = 0;
                        var creditor = $('.td_creditor');
                        for (var j = 0; j < creditor.length; j++) {
                            if ($(creditor[j]).find('span').css('color') == 'rgb(255, 0, 0)') {
                                sum_creditor -= Number($(creditor[j]).find('span').text());
                            } else {
                                sum_creditor += Number($(creditor[j]).text());
                            }
                        }

                        //赋值
                        var sum_cd = sum_debore - sum_creditor;
                        if (sum_cd < 0) {
                            var val = Math.abs(sum_cd);
                            $(this).find('span').css('color', 'red');
                            $(this).find('input').val(sum_cd);
                            $(this).find('span').text(val);
                            $(this).find('span').attr('title', sum_cd);
                            $(this).prev().find('span').text('');
                            total();
                            sumCount();
                            return;
                        }
                        $(this).find('input').val(sum_cd);
                        $(this).find('span').text(sum_cd == 0 ? '' : sum_cd);
                        $(this).prev().find('span').text('');
                        total();
                        sumCount();
                    }
                });
            }
        });
    }

    //显示单元格隐藏内容
    function showContent() {
        $('.digestInput, .subjectInput').mouseover(function () {
            var div = this.getElementsByTagName('div')[0];
            var len = div.offsetWidth;
            var len_s = div.scrollWidth;
            // console.log('len:' + len + '--' + len_s);
            var top = $(this).position().top;
            var left = $(this).position().left;
            var text = $(this).text();
            $('#showContent').css({
                'top': top + 20,
                'left': left + 10
            });
            if (len_s > len) {
                $('#showContent').css({
                    'display': 'block',
                    'border': 'solid 1px #e6e6e6',
                    'width': len_s,
                });
                $('#showContent').text(text);
                $('#showContent').mouseover(function () {
                    $('#showContent').css('display', 'block');
                });
                $('#showContent').mouseout(function () {
                    $('#showContent').css('display', 'none');
                });
            }
        });
        $('.digestInput, .subjectInput').mouseout(function () {
            $('#showContent').css('display', 'none');
        });
    }

    //合计行
    function total() {
        //.td_debore所有值的和
        var sum_debore = 0;
        var debore = $('.td_debtor');
        for (var i = 0; i < debore.length; i++) {
            if ($(debore[i]).find('span').css('color') == 'rgb(255, 0, 0)') {
                sum_debore -= Number($(debore[i]).find('span').text());
            } else {
                sum_debore += Number($(debore[i]).text());
            }
        }
        $('#tfoot_debtor').find('span').text(sum_debore == 0 ? '' : sum_debore);
        $('#tfoot_debtor').find('input').val(sum_debore);

        //.td_creditor所有值的和
        var sum_creditor = 0;
        var creditor = $('.td_creditor');
        for (var j = 0; j < creditor.length; j++) {
            if ($(creditor[j]).find('span').css('color') == 'rgb(255, 0, 0)') {
                sum_creditor -= Number($(creditor[j]).find('span').text());
            } else {
                sum_creditor += Number($(creditor[j]).find('span').text());
            }
        }
        $('#tfoot_creditor').find('span').text(sum_creditor == 0 ? '' : sum_creditor);
        $('#tfoot_creditor').find('input').val(sum_creditor);

    }

    //合计金额
    function sumCount() {
        var value = Number($('#tfoot_debtor span').text() / 100);
        // if (value == 0) {
        //     $('#count span').text('零元整');
        //     return;
        // }
        value = Arabia_To_SimplifiedChinese(value);
        $('#count span').text(value);
        $('#count input').val(value);
    }

    //保存
    function saveVoucher() {
        var form = $('#voucher').serializeArray();
        var data = [];
        var name = [];
        $.each(form, function (i, value) {
            if (value.value != 0 && value.value != '') {
                name.push(value.name.substr(0, value.name.length - 2));
                data.push({
                    'name': value.name,
                    'value': value.value
                });
            }
        });
        if ($.inArray('num_vouch', name) < 0) {
            layer.alert('请输入凭证号', {
                icon: 7
            });
            return;
        }
        if ($.inArray('digest', name) < 0) {
            layer.alert('请输入摘要', {
                icon: 7
            });
            return;
        }
        if ($.inArray('subject', name) < 0) {
            layer.alert('请输入会计科目', {
                icon: 7
            });
            return;
        }
        if ($.inArray('debtor', name) < 0) {
            layer.alert('请输入借方金额', {
                icon: 7
            });
            return;
        }
        if ($.inArray('creditor', name) < 0) {
            layer.alert('请输入贷方金额', {
                icon: 7
            });
            return;
        }
        if ($('#tfoot_debtor input').val() != $('#tfoot_creditor input').val()) {
            layer.alert('借方金额与贷方金额不相等', {
                icon: 7
            });
            return;
        }
        $.post('/finance/public/index/voucher/saveVoucher', data, function (res) {
            if (res.code > 0) {
                layer.msg(res.msg, {
                    icon: 2
                });
            } else {
                layer.msg(res.msg, {
                    icon: 1
                });
                setTimeout(function () {
                    parent.location.reload();
                }, 1500);
            }
        });

    }
</script>
<script type="text/javascript">
    $(function () {

        //借方金额输入框
        $('.td_debtor').click(function () {
            debtorInput(this);
        });

        //贷方金额输入框
        $('.td_creditor').click(function () {
            creditorInput(this);
        });

        //摘要输入框
        $('.digestInput').click(function () {
            digestInput(this);
        });

        //获取科目
        getSubjects();

        //会计科目输入框
        $('.subjectInput').click(function () {
            subjectInput(this);
        });

        //显示单元格全部文本
        showContent();

        //自动计算
        autoCount();

        //制单人
        var val = $('#span_prepard').text();
        $('#input_prepard').val(val);

    });
</script>
</body>

</html>